<template>
  <div class="ztag">
    <div class="n-srchrst">
      <!--      单曲-->
      <div class="srchsongst" v-if="type==1">
        <div class="item" v-for="(item,index) in songs" :key="index" :class="index%2!=0?'odd':''">
          <div class="td">
            <div class="hd">
              <a href="javascript:;" title="播放" class="play" @click.prevent="addSong(item)"></a>
            </div>
          </div>
          <div class="td w0">
            <div class="sn">
              <div class="text f-thlde">
                <router-link :to="{name:'SongDetail',params:{id:item.id}}">
                  <b :title="item.name">{{ item.name }}</b>
                </router-link>
                <router-link :to="{name:'MvDetail',query:{id:item.mv}}" class="mv" title="MV" v-if="item.mv"></router-link>
              </div>
            </div>
          </div>
          <div class="td">
            <div class="oper">
              <a href="javascript:;" title="添加到播放列表" @click.prevent="addSongList(item)"></a>
              <span class=" s-bg-11" title="收藏">收藏</span>
              <span class=" u-icn-81" title="分享">分享</span>
              <span class=" s-bg-12" title="下载">下载</span>
            </div>
          </div>
          <div class="td w1">
            <div class="text f-thlde">
              <router-link :to="{name:'Work',params: {id:ar.id}}" :title="ar.name" v-for="(ar,i) in item.ar" :key="i">
                {{ ar.name }}
                <span v-if="i!==item.ar.length-1">/</span>
              </router-link>
            </div>
          </div>
          <div class="td w2">
            <div class="text f-thlde">
              <router-link :to="{name:'AlbumDetail',params: {id: item.al.id}}" :title="item.al.name">
                <span class="s-sf3">
                 《{{ item.al.name }}》
                </span>
              </router-link>
            </div>
          </div>
          <div class="td">{{ voiceDuration(item.dt) }}</div>
        </div>
      </div>
      <!--      歌手-->
      <div class="m-sgerlist" v-if="type==100">
        <ul class="m-cvrlst">
          <li v-for="(item,index) in artists" :key="index">
            <div class="u-cover">
              <router-link :to="{name:'Work',params:{id:item.id}}">
                <img v-lazy="item.img1v1Url"
                     alt="">
                <span class="msk" :title="item.name"></span>
              </router-link>
            </div>
            <p>
              <router-link :to="{name:'Work',params:{id:item.id}}" class="thide" :title="item.name">
                <span class="">{{ item.name }}</span>

              </router-link>
              <router-link :to="{name:'UserDetailView',params:{id:item.accountId,type:1}}" class="user" v-if="item.accountId">
                <i class="u-icn"></i>
              </router-link>
            </p>
          </li>
        </ul>
      </div>
      <!--      专辑-->
      <ul class="m-blum" v-if="type==10">
        <li v-for="(item,index) in albums" :key="index">
          <div class="u-cover">
            <router-link :to="{name:'AlbumDetail',params:{id:item.id}}">
              <img v-lazy="item.blurPicUrl" alt="">
              <span class="msk" :title="item.name"></span>
            </router-link>
            <a class="icon-play"
               @click.prevent="playAlbum(item.id)"
               title="播放" href="javascript:;"></a>
          </div>
          <p class="dec">
            <router-link :to="{name:'AlbumDetail',params:{id:item.id}}" class="txt f-thlde" :title="item.name">
              <!--              <span class="s-fi2">周</span>-->
              <span>{{ item.name }}</span>
            </router-link>
          </p>
          <p class="user">
            <span class="nm f-thlde">
              <router-link :to="{name:'Work',params:{id:item.artist.id}}" class="s-fi1" :title="item.artist.name">
<!--                宿<span class="s-fc7">周</span>-->
                {{ item.artist.name }}
              </router-link>
            </span>
          </p>
        </li>
      </ul>
      <!--      视频-->
      <ul class="m-mvlist" v-if="type==1014">
        <li v-for="(item,index) in videos" :key="index">
          <div class="cover">
            <img v-lazy="item.coverUrl" alt="">
            <span :title="item.title" class="msk"></span>
            <p class="u-msk-1">
              <span class="u-icn2"></span>
              {{ formatNumber(item.playTime) }}
            </p>
            <p class="u-msk-2">{{ voiceDuration(item.durationms) }}</p>
            <router-link :to="{name:'MvDetail',query:{id:item.vid}}" class="link"></router-link>
          </div>
          <h4 class="title f-thlde">
            <i class="tag" v-if="!isNaN(parseInt(item.vid)) && isFinite(item.vid)"></i>
            <router-link :to="{name:'MvDetail',params:{id:item.vid}}" class="s-fc0" :title="item.title">{{ item.title }}</router-link>
          </h4>
          <h5 class="name f-thlde">
            <span class="f-thlde">
<!--              <a href="#" class="s-fc3">-->
              <!--                <span class="s-fc4">周</span>昭妍(Miumiu)-->
              <!--              </a>-->
                <router-link :to="{name:'Work',params:{id:n.userId}}" v-for="(n,p) in item.creator" :title="n.userName">
                  {{ n.userName }} <span v-if="p!= item.creator.length-1">/</span>
                </router-link>
            </span>
          </h5>
        </li>
      </ul>
      <!--      歌词-->
      <div class="n-srchrst" v-if="type==1006">

        <div class="srchsongst">
          <div v-for="(item,index) in songs">
            <div class="item odd">
              <div class="td">
                <div class="hd">
                  <a href="javascript:;" title="播放" class="play" @click.prevent="addSong(item)"></a>
                </div>
              </div>
              <div class="td w0">
                <div class="sn">
                  <div class="text f-thlde">
                    <router-link :to="{name:'SongDetail',params:{id:item.id}}">
                      <b :title="item.name">{{item.name}}</b>
                    </router-link>
                    <a href="#" class="mv" title="MV" v-if="item.mv"></a>
                  </div>
                </div>
              </div>
              <div class="td">
                <div class="oper">
                  <a href="javascript:;" title="添加到播放列表" @click.prevent="addSongList(item)"></a>
                  <span class=" s-bg-11" title="收藏">收藏</span>
                  <span class=" u-icn-81" title="分享">分享</span>
                  <span class=" s-bg-12" title="下载">下载</span>
                </div>
              </div>
              <div class="td w1">
                <div class="text f-thlde">
                  <router-link :to="{name:'Work',params: {id:ar.id}}" :title="ar.name" v-for="(ar,i) in item.ar" :key="i">
                    {{ ar.name }}
                    <span v-if="i!==item.ar.length-1">/</span>
                  </router-link>
                </div>
              </div>
              <div class="td w2">
                <div class="text f-thlde">
                  <router-link :to="{name:'AlbumDetail',params: {id: item.al.id}}">
                <span class="s-sf3">
                  《{{item.al.name}}》
                </span>
                  </router-link>
                </div>
              </div>
              <div class="td">{{voiceDuration(item.dt)}}</div>
            </div>
            <div class="lyric">
              <div class="more" v-if="lyricIndex==index">
                <!--                <p>-->
                <!--                  <span class="s-fc7">周</span>信廷-->
                <!--                </p>-->
                <p v-for="(lyric,l) in item.lyrics" :key="l" v-html="lyric"></p>
              </div>
              <div class="less" v-else>
<!--                <p>-->
<!--                  <span class="s-fc7">周</span>信廷-->
<!--                </p>-->
               <p v-for="(lyric,l) in item.lyrics.slice(0,4)" :key="l" v-html="lyric">

               </p>
              </div>

              <div class="crl">
                <a href="javascript:;" class="open" @click.prevent="change(index)" v-if="lyricIndex!=index">展开
                  <i class="zhankai"></i>
                </a>
                <a href="javascript:;" class="open" @click.prevent="change(-1)" v-else>收起
                  <i class="shouqi"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      歌单-->
      <table class="m-table" v-if="type==1000">
        <tbody>
        <tr class="h-flag" v-for="(item,index) in playlists" :key="index">
          <td class="first w0">
            <div class="hd">
              <span class="ply" title="播放" @click.prevent="addPlay(item.id)"></span>
            </div>
          </td>
          <td class="w7">
            <div class="cover">
              <router-link :to="{name:'RecommendDetail',params:{id:item.id}}">
                <img v-lazy="item.coverImgUrl"
                     alt="">
                <span class="mask" :title="item.name"></span>
              </router-link>
            </div>
          </td>
          <td style="width: 355px;">
            <div class="tt">
              <div class="ttc">
                <span class="txt">
                  <router-link :to="{name:'RecommendDetail',params:{id:item.id}}" :title="item.name">
<!--                    <span class="s-fc7">周</span>杰伦-Jay-->
                    {{ item.name }}
                  </router-link>
                </span>
              </div>
            </div>
          </td>
          <td class="w11 s-fc-4">{{ item.trackCount }}首</td>
          <td class="w4">
            <div class="text f-thlde">
              <span class="s-fh3">by</span>&nbsp;
              <router-link :to="{name:'UserDetailView',params:{id:item.creator.userId,type:1}}" class="s-fh3" :title="item.creator.nickname">{{ item.creator.nickname }}</router-link>

            </div>
          </td>
          <td class="w6 s-fc-4">
            收藏：
            <span>{{ item.bookCount }}</span>
          </td>
          <td class="last w6 s-fc-4">
            收听：
            <span>{{ formatNumber(item.playCount) }}</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--      声音主播-->
      <div class="hear" v-if="type==1009">
        <h2 class="head2">声音主播</h2>
        <ul class="m-rdilist">
          <li v-for="(item,index) in djRadios" :key="index">
            <router-link :to="{name:'DjRadioDetail',query:{id:item.id}}" class="u-cover" :title="item.name">
              <img v-lazy="item.picUrl" alt="">

            </router-link>
            <h3 class="f-fs2 f-thlde">
              <router-link :to="{name:'DjRadioDetail',query:{id:item.id}}" class="s-dy2" :title="item.name">
                {{ item.name }}
                <!--                <span class="s-fc-7">周</span>解读版-->
              </router-link>
            </h3>
            <p class="s-fc4 f-thlde">
              by
              <router-link :to="{name:'UserDetailView',params:{id:item.dj.userId,type:1}}" :title="item.dj.nickname">{{ item.dj.nickname }}</router-link>

              <i class="icon-9" :class="item.dj.gender==1?'man':'women'" v-if="item.dj.gender!=0"></i>
            </p>
          </li>

        </ul>
      </div>
      <!--      用户-->
      <div class="user-name" v-if="type==1002">
        <table class="m-table-1">
          <tbody>
          <tr class="h-flag" v-for="(item,index) in userprofiles" :key="index">
            <td class="first w1">
              <div class="u-cover">
                <router-link :to="{name:'UserDetailView',params:{id:item.userId,type:1}}">
                  <img v-lazy="item.avatarUrl"
                       alt="">
                  <span class="msk" :title="item.nickname"></span>
                </router-link>
              </div>
            </td>
            <td style="width: 480px;">
              <div class="ttc">
                <router-link :to="{name:'UserDetailView',params:{id:item.userId,type:1}}" class="txt" :title="item.nickname">
<!--                  <span class="s-fc7">周</span>傳雄-->
                  {{item.nickname}}
                  <span class="u-icn-new-wrap">
                    <img class="icon-8" v-if="item.avatarDetail"
                         :src="item.avatarDetail.identityIconUrl"
                         alt="">
                  </span>
                  <i class="icnfix" :class="item.gender==1?'man':'women'"></i>
                </router-link>

              </div>
              <div class="dec f-thlde" :title="item.signature">
               {{item.signature}}
              </div>
            </td>
            <td class="w2">
              <a href="javascript:void(0)" class="u-btn">
                <i>关注</i>
              </a>

            </td>
            <td class="w2 s-fc4">歌单：{{item.playlistCount}}</td>
            <td class="last w2 s-fc4">
              粉丝：
              <span>{{item.followeds}}</span>
            </td>
          </tr>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import {voiceDuration} from "@/utils/voiceDuration";
import {formatNumber} from "@/utils/formatNumber";
import {reqSongListDetail} from "@/http/api";

export default {
  name: "index",
  data() {
    return {
      artists: [],
      songs: [],
      albums: [],
      videos: [],
      playlists: [],
      djRadios: [],
      userprofiles: [],
      voiceDuration: voiceDuration,
      formatNumber: formatNumber,
      lyricIndex:-1,

    }
  },
  computed: {
    type() {
      return this.$route.query.type
    },
    word() {
      return this.$route.query.word
    },
  },
  methods: {
    async addPlay(id) {
      let result = await reqSongListDetail(id)
      let list = result.data.playlist.tracks
      this.$store.commit('track/addMusic', list)
      this.$store.commit('track/SETMUSIC', list[0])
    },
    async playAlbum(id){
      let result = await this.$API.reqAlbum(id)
      let list = result.data.songs
      this.$store.commit('track/SETMUSIC',list[0])
      this.$store.commit('track/addMusic',list)
    },
    addSongList(i){
      this.$store.commit('track/ADDMUSICLIST',i)
    },
    addSong(i){
      this.$store.commit('track/SETMUSIC',i)
    },
    change(index){
      this.lyricIndex = index
    },
    async getDetail() {
      let result = await this.$API.SearchAllKeywords(this.word, this.type)
      this.artists = result.data.result.artists
      this.songs = result.data.result.songs
      this.albums = result.data.result.albums
      this.videos = result.data.result.videos
      this.playlists = result.data.result.playlists
      this.djRadios = result.data.result.djRadios
      this.userprofiles = result.data.result.userprofiles
    }
  },
  mounted() {
    this.getDetail()
  }
}
</script>

<style scoped lang="less">
.ztag {

  .n-srchrst {
    margin-top: 20px;

    .srchsongst {
      .odd {
        background: #f7f7f7;
        border-color: #f7f7f7;
      }

      .item {
        height: 25px;
        padding: 10px 10px 8px 18px;
        border: 1px solid #fff;
        display: flex;
        align-items: center;
        &:hover {
          background-color: #F2F2F2;
        }

        &:hover .td .oper {
          visibility: visible;
        }

        .w0 {
          width: 370px;
        }

        .w1 {
          width: 15%;
          margin-right: 12px;
          margin-left: 10px;

          a {
            color: #333;
          }
        }

        .w2 {
          width: 18%;
          margin-right: 20px !important;
          min-height: 16px;
        }

        .td {
          float: left;
          margin-right: 5px;

          .oper {
            //display: none;
            float: left;
            visibility: hidden;

            a {
              width: 13px;
              height: 13px;
              float: left;
              margin-top: 2px;
              display: inline-block;

              background: url("../../../assets/icon.png") no-repeat 0 -700px;

              &:hover {
                background-position: -22px -700px;
              }

            }

            .s-bg-11 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 6px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../../assets/table.png") no-repeat 0 -174px;

              &:hover {
                background-position: -20px -174px;
              }
            }

            .u-icn-81 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 6px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../../assets/table.png") no-repeat 0 -195px;

              &:hover {
                background-position: -20px -195px;
              }
            }

            .s-bg-12 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 6px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../../assets/table.png") no-repeat -81px -174px;

              &:hover {
                background-position: -104px -174px;
              }
            }
          }

          .s-sf4 {
            color: #0c73c2;
          }

          .s-sf3 {
            color: #666;
          }

          .sn {
            line-height: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .text {
              position: relative;
              display: inline-block;
              *display: inline;
              *zoom: 1;
              padding-right: 25px;
              width: auto;
              max-width: 100%;
              height: 20px;

              a {
                text-decoration: none;
                color: #333;

                b {
                  font-weight: normal;
                }
              }

              .mv {
                background-position: 0 -151px;
                position: absolute;
                right: 0;
                display: inline-block;
                vertical-align: middle;
                width: 23px;
                height: 17px;
                background-image: url("../../../assets/table.png");
              }
            }
          }

          .hd {
            height: 17px;
            width: 17px;

            .play {
              display: inline-block;
              width: 17px;
              height: 17px;
              margin-right: 15px;
              cursor: pointer;
              background-position: 0 -103px;
              background-image: url("../../../assets/table.png");
            }
          }
        }
      }

      .lyric {
        margin: 10px 0 18px 52px;
        color: #666;
        line-height: 23px;
        word-wrap: break-word;
        word-break: break-all;


        .s-fc7 {
          color: #0c73c2;
        }

        .crl {
          margin-top: 5px;

          .open {
            color: #666;

            i {
              margin-left: 5px;
              width: 11px;
              height: 8px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../../assets/icon.png");
            }

            .zhankai {
              background-position: -65px -520px;
            }

            .shouqi {
              background-position: -45px -520px;
            }
          }


        }
      }
    }

    .m-sgerlist {
      .m-cvrlst {
        margin: 0 auto;
        width: 924px;
        height: auto;
        overflow: hidden;

        li {
          //margin-left: 24px;
          width: 154px;
          height: 184px;
          float: left;
          display: inline-block;
          overflow: hidden;
          line-height: 1.4;

          .u-cover {
            width: 130px;
            height: 130px;
            position: relative;
            display: block;

            a {
              text-decoration: none;
              color: #333;

              img {
                display: block;
                width: 100%;
                height: 100%;
              }

              .msk {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-position: 0 -680px;
                background-image: url("../../../assets/coverall.png");
              }
            }
          }

          p {
            margin-top: 8px;
            width: 130px;

            .thide {
              display: inline-block;
              max-width: 85%;
              vertical-align: middle;
              color: #000;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-wrap: normal;

              .s-fc7 {
                color: #0c73c2;
              }
            }

            .user {
              .u-icn {
                position: relative;
                float: right;
                width: 17px;
                height: 18px;
                background-position: 0 -740px;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                background-image: url("../../../assets/icon.png");
              }
            }
          }
        }
      }
    }

    .m-blum {
      width: 930px;
      margin: 0 auto;
      height: auto;
      overflow: hidden;

      li {
        width: 186px;
        height: 208px;
        float: left;
        display: inline-block;
        overflow: hidden;
        line-height: 1.4;

        .u-cover {
          width: 130px;
          height: 130px;
          position: relative;
          display: block;

          &:hover .icon-play {
            display: block;
          }

          a {
            color: #333;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }

            .msk {
              display: inline-block;
              width: 153px;
              height: 130px;
              position: absolute;
              top: 0;
              left: 0;
              background-position: 0 -845px;
              background-image: url("../../../assets/coverall.png");
            }
          }

          .icon-play {
            display: none;
            left: 94px;
            width: 28px;
            height: 28px;
            background-position: 0 -140px;
            position: absolute;
            right: 10px;
            bottom: 5px;
            background-image: url("../../../assets/icn_ply2.png");
          }
        }

        .dec {
          margin: 8px 0 3px;
          font-size: 14px;

          .txt {
            display: inline-block;
            max-width: 155px;
            vertical-align: middle;
            color: #000;

            .s-fi2 {
              color: #0c73c2;
            }
          }
        }

        .user {
          .nm {
            display: inline-block;
            max-width: 85%;
            vertical-align: middle;

            .s-fi1 {
              color: #666;

              .s-fc7 {
                color: #0c73c2;
              }
            }
          }
        }
      }
    }

    .m-mvlist {
      margin: 0 auto;
      height: auto;
      overflow: hidden;
      width: 930px;

      li {
        float: left;
        width: 159px;
        line-height: 1.5;
        overflow: hidden;
        margin-right: 27px;
        margin-bottom: 40px;

        .cover {
          width: 159px;
          height: 90px;
          position: relative;
          zoom: 1;

          img {
            width: 100%;
            height: 100%;
            display: block;
            position: relative;
            zoom: 1;
          }


          .u-msk-1 {
            position: absolute;
            top: 0;
            right: 0;
            padding-right: 5px;
            height: 20px;
            line-height: 20px;
            color: #fff;
            box-sizing: border-box;
            text-align: right;
            width: 90px;
            display: inline-block;
            background-image: url("../../../assets/mask.png");
            background-position: 0 0;
            text-shadow: -2px 1px rgb(0 0 0 / 40%);

            .u-icn2 {
              margin: -2px 2px 0 0;
              width: 15px;
              height: 10px;
              background-position: -60px -310px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../../assets/icon2.png");
            }
          }

          .u-msk-2 {
            position: absolute;
            bottom: 0;
            left: 0;
            padding-left: 5px;
            height: 20px;
            line-height: 20px;
            color: #fff;
            text-shadow: -2px 1px rgb(0 0 0 / 40%);
          }

          .link {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 9;
          }
        }

        .title {
          width: 100%;
          height: auto;
          margin: 7px 0 1px;
          border: none;
          font-size: 14px;
          font-weight: normal;

          .tag {
            margin: -2px 4px auto auto;
            width: 26px;
            height: 16px;
            background-position: -270px -480px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-image: url("../../../assets/icon2.png");
          }

          .s-fc0 {
            color: #000;
          }
        }

        .name {
          width: 100%;
          font-weight: normal;

          a {
            color: #666;
          }

          .s-fc3 {
            color: #666;

            .s-fc4 {
              color: #0c73c2;
            }
          }
        }
      }
    }

    .m-table {
      border-collapse: separate;
      border-spacing: 0;
      border: 0;
      width: 100%;

      tbody {
        tr {
          &:nth-child(even) {
            background-color: #F7F7F7;
          }

          &:hover {
            background-color: #F2F2F2;
          }
        }

        .h-flag {
          width: 100%;
          height: 62px;
          display: flex;
          align-items: center;

          td {
            border: 1px solid #fff;
            border-width: 1px 0;
            line-height: 18px;
            text-align: left;
            height: 62px;
            display: flex;
            align-items: center;

            .tt {
              margin-right: -100px;
              float: left;
              width: 100%;
              height: 18px;

              .ttc {
                float: left;
                width: 100%;

                .txt {
                  position: relative;
                  display: inline-block;
                  *display: inline;
                  *zoom: 1;
                  padding-right: 25px;
                  margin-right: -25px;
                  max-width: 99%;
                  height: 20px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;


                  a {
                    color: #333;

                    .s-fc7 {
                      color: #0c73c2;
                    }
                  }
                }
              }
            }
          }

          .first {
            border-left: 1px solid #fff;

            .hd {
              width: 17px;
              height: 17px;
              margin-left: 17px;

              .ply {
                width: 17px;
                height: 17px;
                cursor: pointer;
                background-position: 0 -103px;
                float: left;
                background-image: url("../../../assets/table.png");
              }
            }
          }

          .last {
            width: 99px;
            border-right: 1px solid #fff;
          }

          .w0 {
            width: 56px;
          }

          .w7 {
            width: 70px;

            .cover {
              width: 50px;
              height: 50px;
              position: relative;
              display: block;

              a {
                color: #333;

                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                }

                .mask {
                  background-position: -160px 0;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background-image: url("../../../assets/coverall.png");
                }
              }
            }
          }

          .w4 {
            width: 200px;

            .text {
              width: 100%;
              position: relative;
              zoom: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;


              .s-fh3 {
                color: #666;
              }

              a {
                white-space: nowrap;
              }
            }
          }

          .w11 {
            width: 50px;
            padding-right: 0;
          }

          .w6 {
            width: 98px;
            padding: 0 6px;
          }

          .s-fc-4 {
            color: #999;
          }
        }
      }
    }

    .hear {
      margin-top: 30px;

      .head2 {
        margin-top: 8px;
        padding-bottom: 6px;
        border-bottom: 1px solid #dadada;
        line-height: 17px;
        font-weight: bold;
      }

      .m-rdilist {
        margin: 16px 0 0 -37px;
        height: auto;
        overflow: hidden;
        li {
          margin: 0 0 40px 37px;
          float: left;
          width: 150px;

          .u-cover {
            width: 150px;
            height: 150px;
            position: relative;
            display: block;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .f-fs2 {
            margin: 13px 0 6px;
            line-height: 16px;
            font-size: 14px;
            font-weight: normal;

            .s-dy2 {
              color: #333;

              .s-fc-7 {
                color: #0c73c2;
              }
            }
          }

          .s-fc4 {
            line-height: 18px;
            display: flex;
            align-items: center;

            a {
              color: #333;
              margin: 0 5px;
            }

            .icon-9 {
              width: 14px;
              height: 15px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../../assets/icon.png");
            }

            .women {
              background-position: -70px 0;
            }

            .man {

              background-position: -70px -20px;

            }
          }
        }
      }
    }

    .user-name {
      .m-table-1 {
        border-collapse: separate;
        border-spacing: 0;
        border: 0;
        width: 100%;

        tbody {
          tr {
            &:nth-child(even) {
              background-color: #F7F7F7;
            }

            &:hover {
              background-color: #F2F2F2;
            }
          }

          .h-flag {

            width: 100%;
            height: 62px;
            display: flex;
            align-items: center;

            td {
              border: 1px solid #fff;
              border-width: 1px 0;
              height: 62px;
              line-height: 18px;
              text-align: left;
              display: flex;
              align-items: center;
              flex-wrap: wrap;

              .ttc {
                height: 18px;
                margin-right: 20px;

                .txt {
                  position: relative;
                  display: inline-block;
                  *display: inline;
                  *zoom: 1;
                  padding-right: 25px;
                  margin-right: -25px;
                  height: 20px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 14px;
                  color: #333;
                  .s-fc7 {
                    color: #0c73c2;
                  }

                  .u-icn-new-wrap {
                    position: relative;
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    margin: 2px 0 0 2px;
                    vertical-align: top;

                    .icon-8 {
                      top: 0;
                      left: 0;
                      width: 15px;
                      height: 15px;
                    }
                  }

                  .icnfix {
                    top: 2px;
                    _top: 0;
                    right: auto;
                    margin-left: 5px;
                    z-index: 10;
                    width: 14px;
                    height: 15px;

                    position: absolute;
                    display: inline-block;
                    overflow: hidden;
                    vertical-align: middle;
                    background-image: url("../../../assets/icon.png");
                  }
                  .man{
                    background-position: -70px -20px;
                  }
                  .women{
                    background-position: -70px 0;
                  }
                }
              }

              .dec {
                width: 100%;
                margin-top: -10px;
                color: #999;
              }
            }

            .w1 {
              width: 70px;
              margin-left: 10px;

              .u-cover {
                width: 50px;
                height: 50px;
                position: relative;
                display: block;

                a {
                  color: #333;

                  img {
                    display: block;
                    width: 100%;
                    height: 100%;
                  }

                  .msk {
                    background-position: -160px 0;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-image: url("../../../assets/coverall.png");
                  }
                }
              }
            }

            .w2 {
              width: 110px;
              padding: 0 10px;

              .u-btn {
                width: 64px;
                height: 27px;
                background-position: 0 -990px;
                line-height: 27px;
                display: inline-block;
                background-image: url("../../../assets/button.png");
              }

              i {
                display: inline-block;
                height: 25px;
                line-height: 25px;
                padding-left: 26px;
                color: #5d5d5d;
                cursor: pointer;
              }
            }

            .s-fc4 {
              color: #999;
            }

            .first {
              border-left: 1px solid #fff;
            }

            .last {
              border-right: 1px solid #fff;
            }
          }
        }
      }
    }
  }
}
</style>
